<!--
 * @Author: sjt
 * @Date: 2024-05-16 11:25:51
 * @LastEditors: sjt
 * @LastEditTime: 2024-05-28 08:55:14
 * @Description: file content
-->
<template>
  <div class="wrap-video">
    <div class="video-player" v-if="onPlaying !== ''">
      <div class="player-box" ref="bigVideoRef">
        <img
          class="close-btn"
          src="@/assets/images/kaidu/x.png"
          alt=""
          @click="handleClose"
        />
        <centerVideo videoId="videoBig" :url="currentPlayer.src" class="my-video" ref="centerVideoRef"/> 
      </div>
    </div>
    <ul class="video-list">
      <li
        v-for="(item, index) in videoList"
        :class="{ playing: index === onPlaying }"
        @click="handelCheck(item, index)"
      >
        <!-- <div class="cover" ></div> -->
        <!-- <video
          autoplay
          controls
          muted
          src="https://media.solutions.jqzns.com/8d21d3e3-9e16-4a95-b464-09ea0382e654"
        ></video> -->
        <!-- <myVideo :videoId="'videoDom' + index"  :url="item.src" />  -->
        <img :src="item.icon" alt="">
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import myVideo from '@/components/myVideo.vue'
import centerVideo  from '@/components/centerVideo.vue'
import videoIcon0  from '@/assets/images/video/video0.png'
import videoIcon1  from '@/assets/images/video/video1.png'
import videoIcon2  from '@/assets/images/video/video2.png'
import videoIcon3  from '@/assets/images/video/video3.png'
import videoIcon4  from '@/assets/images/video/video4.png'
import videoIcon5  from '@/assets/images/video/video5.png'
import videoIcon6  from '@/assets/images/video/video6.png'
import videoIcon7 from '@/assets/images/video/video7.png'
import videoIcon8 from '@/assets/images/video/video8.png'
let onPlaying = ref(0)
let currentPlayer = ref({name: 1,
    src: 'ezopen://open.ys7.com/FB4064961/1.hd.live'})
let bigVideoRef = ref()
let centerVideoRef =ref()
let videoList = ref([
  {
    name: 1,
    icon: videoIcon0,
    src: 'ezopen://open.ys7.com/FB4064961/1.hd.live'
  },
  {
    name: 1,
    icon: videoIcon1,
    src: 'ezopen://open.ys7.com/FB4064961/2.hd.live'
  },
  {
    name: 1,
    icon: videoIcon2,
    src: 'ezopen://open.ys7.com/FB4064961/5.hd.live'
  },
  {
    name: 1,
    icon: videoIcon3,
    src: 'ezopen://open.ys7.com/FB4064961/6.hd.live'
  },
  {
    name: 1,
    icon: videoIcon8,
    src: 'ezopen://open.ys7.com/FB4064961/3.hd.live'
  },
  {
    name: 1,
    icon: videoIcon5,
    src: 'ezopen://open.ys7.com/FB4064961/8.hd.live'
  },
  {
    name: 1,
    icon: videoIcon6,
    src: 'ezopen://open.ys7.com/FB4064961/10.hd.live'
  },
  {
    name: 1,
    icon: videoIcon7,
    src: 'ezopen://open.ys7.com/FB4064961/11.hd.live'
  }
])
const handelCheck = (item, index) => {
  onPlaying.value = index
  currentPlayer.value = item
  // setTimeout(() => {
  //   let w = bigVideoRef.value.clientWidth
  //   let myDom =document.getElementById('videoBig')
  //   myDom.style.height = w / (16 / 9)  + 'px'
  // }, 100)
  nextTick(() => {
    let w = bigVideoRef.value.clientWidth
    let myDom =document.getElementById('videoBig')
    myDom.style.height = w / (16 / 9)  + 'px'
    centerVideoRef.value.initPlayer()
  })
}
const handleClose = () => {
  onPlaying.value = ''
}
onMounted(() => {
  nextTick(() => {
    let w = bigVideoRef.value.clientWidth
    let myDom =document.getElementById('videoBig')
    myDom.style.height = w / (16 / 9)  + 'px'
    centerVideoRef.value.initPlayer()
  })
})
</script>

<style lang="scss" scoped>
.wrap-video {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .video-player {
    width: 100%;
    height: calc(100% - 168px);
    background: url('@/assets/images/kaidu/video-bg.png') no-repeat;
    background-position: center;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    .my-video {
      width: 100%;
      overflow: hidden;
    }
    .close-btn {
      cursor: pointer;
      z-index: 22;
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }
  .video-list {
    position: absolute;
    bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    li {
      cursor: pointer;
      height: 148px;
      width: 11.6%;
      border: 1px solid #0078ff;
      overflow: hidden;
      position: relative;
      .cover {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 9992;
      }
      img {
        width: 100%;
        height: 100%;
        pointer-events: null;
      }
    }
    .playing {
      border-radius: 2px;
      border: 3px solid #fdc251 !important;
    }
  }
}
@media screen and (max-width: 1920px) {
  // .video-player {
  //   video {
  //     width: 68%;
  //     border: 1px solid #0078ff;
  //     margin-bottom: 20px;
  //   }
  //   img {
  //     z-index: 22;
  //     position: absolute;
  //     right: 17%;
  //     top: 12%;
  //   }
  // }
  .player-box {
    width: 68%;
    height: auto;
    border: 1px solid #0078ff;
    margin-bottom: 20px;
    position: relative;
  }
}
@media screen and (min-width: 1921px) and (max-width: 4161px) {
  // .video-player {
  //   video {
  //     width: 78%;
  //     height: 90%;
  //     margin-bottom: 20px;
  //   }
  //   img {
  //     z-index: 22;
  //     position: absolute;
  //     right: 18%;
  //     top: 5%;
  //   }
  // }
  .player-box {
    width: 68%;
    margin-bottom: 20px;
    position: relative;
  }
}
</style>
